<template>
<div id="detail">
<!--{{iid}}-->
<!--  <h2 v-html="spu_info"></h2>-->
<!--  {{spu_info.pics}}-->
     <NavBar>
  <div slot="left" class="left" @click="return_before"><van-icon name="arrow-left" /></div>
  <div slot="center">商品详情</div>

</NavBar>
  <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white" >
  <van-swipe-item>
<div v-if="spu_info">
<img :src="'/api/media/'+spu_info.pics[0]" >
  </div>
/></van-swipe-item>
  <van-swipe-item>
    <div v-if="spu_info">
    <img :src="'/api/media/'+spu_info.pics[1]">
    </div>
  </van-swipe-item>
  <van-swipe-item>
    <div v-if="spu_info">
    <img :src="'/api/media/'+spu_info.pics[2]">
    </div>
  </van-swipe-item>

  <van-swipe-item>
    <div v-if="spu_info">
    <img :src="'/api/media/'+spu_info.pics[3]">
    </div>
  </van-swipe-item>
</van-swipe>

<!--  这是价格和详情-->
  <div id="tab_good">
  <van-row>
  <van-col span="8" class="first_col"> <span class="similar-product-price" >¥<span class="price">{{spu_info.price}}</span></span></van-col>
  <van-col span="8"></van-col>
  <van-col span="8">
    <div >
    <span class="item_goods"><van-icon name="after-sale" size="20" /></span>
      <span id="icon1">降价通知</span>
   <span class="item_goods"> <van-icon name="phone-o" size="20"/></span>
          <span id="icon2">联系卖家</span>
      </div>
  </van-col>
</van-row>
  </div>
  <div class="similar-product-price" id="coupon">
    <span>成为app会员，立享9.5折优惠 ></span>
  </div>
<!--  标题-->
  <div class="caption_name">
    <span>
      {{spu_info.name}}
    </span>
  </div>
<!--  基本信息-->

  <div class="info_item">
<!--  <van-cell-group>-->
<!--    <van-cell title="已选" ><div class="info_11">{{spu_info.name|ellipsis}} 1件</div></van-cell>-->
<!--   <van-cell title="送至" ><div class="info_11">上海市浦东新区上海第二工业大学13栋123宿舍</div></van-cell>-->
<!--    <van-cell title="运费" ><div class="info_11">免运费</div></van-cell>-->
<!--</van-cell-group>-->
    <div class="info_ha">
      <div class="title_name">已选</div>
      <div class="value_txt">{{spu_info.name|ellipsis}},1件，可选</div>
    </div>
    <div class="info_ha">
       <div class="title_name">送至</div>
      <div class="value_txt">上海市浦东新区金海路2360号</div>
    </div>
    <div class="info_ha">
       <div class="title_name">运费</div>
      <div class="value_txt">免运费(请以订单提交时为准)</div>
    </div>
    </div>
<!--  这是商品评价区域-->
  <div class="evaluate">
<comments :comment_info="comment_list"> </comments>
  </div>
<!--  商品底部栏-->
  <div>
  <van-goods-action>
  <van-goods-action-icon icon="chat-o" text="客服" />
  <van-goods-action-icon icon="shop-o" text="店铺" />
  <van-goods-action-button color="#be99ff" type="warning" text="加入购物车" @click="addcart" />
  <van-goods-action-button color="#7232dd" type="danger" text="立即购买" @click="paygood" />
</van-goods-action>
    </div>
<!--  sku条目-->

</div>

</template>

<script>

import NavBar from "@/components/common/NavBar/NavBar";
import {getdetaildata} from "@/network/Users/getgooddetail";
import {sendhistory} from "@/network/Users/addhistory";
import {addcart} from "@/network/Users/cart";
import Comments from "@/views/comments/Comments";

export default {
name: "Detail",
  components:{Comments, NavBar},
  data(){
  return {
    iid: null,
    spu_info: '',
    comment_list:[]
  }},
  methods:{
   return_before(){
    history.go(-1)
  },
      onClickIcon() {
      // Toast.success('点击图标');
    },
    onClickButton() {
      // Toast('点击按钮');
    },
    addcart(){
        this.$toast.success('加入购物车成功')
        addcart(this.spu_info.sku).then(
            res=>{
              console.log(res);
            }
        )

    },
    paygood(){
        this.$toast.success('购买成功')
    }
  },
  created(){
  this.$emit('header',false)
  this.iid=this.$route.params.iid
    getdetaildata(this.iid).then(
        res=>{
          this.spu_info=res.spu_info
          console.log(res);
          // console.log(this.$route);
        }
    )
    sendhistory(this.$route.params.iid).then(
        res=>{
          console.log(res);
        }
    )
  },
   filters: {
    ellipsis (value) {
      if (!value) return ''
      if (value.length > 20) {
        return value.slice(0,20) + '...'
      }
      return value
    }
}}
</script>

<style scoped>
  #detail{
      /*background-color: rgb(247,248,250);*/
  }
  .my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    line-height: 150px;
    text-align: center;
    background-color: #39a9ed;
  }
  .van-swipe{
    height:350px
  }
  .my-swipe img{
    height: 100%;
width: 100%;
  }
  .van-row{
    text-align:center;
    line-height: 24px;
  }
  #tab_good{
    margin-top:35px
  }
   .similar-product-price{
color: #fa2c19;
font-size:24px;
font-family: Arial;
/*left: -31px;*/
  }
.first_col{
  padding-left:20px;
  position:relative;
  margin-top:6px
}
.price{
  font-size:28px
}
van-icon{
  font-size:20px
}
.item_goods{
  margin-left:27px
}

#icon1{
  font-size:10px;
  position:absolute;
  top:450px;
  right:49px;
}
#icon2{
font-size: 10px;
position: absolute;
top: 450px;
right: -1px;
}
#coupon{
font-size: 11px;
position: relative;
top: 9px;
left: 21px;
}
.caption_name{
  margin-top: 50px;
  font-size:16px;
  padding: 0px 20px;
  color: #262626;
  font-weight: 700;
line-height: 21px;
}
.info_item{
  margin-top: 20px;
  height: 200px;
 /*background-color: rgb(247,248,250);*/
  border-radius: 10px 10px 10px 10px;
  /*background-color: skyblue;*/
}
.span_col{
  height: 200px;
   background-color: rgb(247,248,250);
}
.van-cell_title{
  width: 48px;
}
.info_11{
    /*position: absolute;*/
    /*top: 10px;*/
    /*left: 66px;*/

}
.info_ha{
  height: 50px;
  display: flex;
}
.title_name{
  line-height: 50px;
  text-align: center;
  font-size: 14px;
  color: #262626;
  margin-left: 21px;
}
.value_txt{
  flex: 1;
  line-height: 50px;
  text-align: left;
  margin-left: 18px;
  color: #262626;
  font-size: 14px;
}
.evaluate{
  height: 300px;
}
.left .van-icon {
    font-size: 20px;
    position: relative;
    top: 3px;
    left: -8px;
}
</style>